<template>
  <div class="goodsOrder-wrapper">
    <Breadcrumb>
      <BreadcrumbItem to="/">首页</BreadcrumbItem>
      <BreadcrumbItem to="/user">个人中心</BreadcrumbItem>
      <BreadcrumbItem to="/user/5">我的订单</BreadcrumbItem>
      <BreadcrumbItem>订单详情</BreadcrumbItem>
    </Breadcrumb>

    <div class="goodsOrder-content">
      <Steps :current="currentStep">
        <Step title="拍下商品">
          <template slot="content">{{orderData.order_time}}</template>
        </Step>
        <Step title="付款">
          <template slot="content" v-if="orderData.pay_time">{{orderData.pay_time}}</template>
        </Step>
        <Step title="卖家发货"></Step>
        <Step title="确认收货"></Step>
        <Step title="评价"></Step>
      </Steps>

      <Card>
        <p slot="title">订单详情</p>
        <div class="left-box">
          <ul>
            <li class="info-item">
              <div class="info-item-left">收货地址：</div>
              <div>{{orderData.buyer.nickname+','+orderData.buyer.phone+','+address.region+' '+address.detail}}</div>
            </li>
            <li class="info-item">
              <div class="info-item-left">订单编号：</div>
              <div>{{$route.query.order_id}}</div>
            </li>
            <li class="info-item">
              <div class="info-item-left">创建时间：</div>
              <div>{{orderData.order_time}}</div>
            </li>
            <li class="info-item">
              <div class="info-item-left">商家：</div>
              <div>
                <router-link to="space/5">{{orderData.seller.shop_name}}</router-link>
              </div>
            </li>
          </ul>
        </div>
        <div class="center-box" v-if="orderData.status == 1">
          <Icon type="md-checkmark-circle" size="48" color="#27ae60" />
          <h3>订单状态：买家已付款，等待卖家发货</h3>
        </div>
        <div class="center-box" v-else>
          <Icon type="md-information-circle" size="48" color="#f39c12" />
          <h3>订单状态：商品已拍下，等待买家付款</h3>
        </div>
      </Card>

      <Table border :columns="columns" :data="tableData"></Table>

      <div class="price-area">
        <div class="price-key">
          <span>商品总价：</span>
          <span>运费（快递）：</span>
          <span>运费险（卖家赠送）：</span>
          <span id="total">需付款：</span>
        </div>
        <div class="price-value">
          <strong>￥{{orderData.amount*orderData.goods.price}}.00</strong>
          <strong>￥0</strong>
          <strong>￥0</strong>
          <strong
            style="color: #d35400;font-size: large"
          >￥{{orderData.amount*orderData.goods.price}}.00</strong>
        </div>
      </div>
      <Button
        type="warning"
        size="large"
        @click="pay"
        :loading="loading"
        v-if="orderData.status == 0"
      >立即付款</Button>
    </div>
  </div>
</template>

<script>
import { CodeToText } from "element-china-area-data";

export default {
  name: "goods_order_detail",
  data() {
    return {
      currentStep: 1,
      columns: [
        {
          title: "商品",
          key: "name",
          align: "center"
        },
        {
          title: "单价",
          key: "price",
          align: "center"
        },
        {
          title: "数量",
          key: "amount",
          align: "center"
        },
        {
          title: "备注",
          key: "remark",
          align: "center"
        },
        {
          title: "规格",
          key: "kind",
          align: "center"
        }
      ],
      orderData: {},
      tableData: [],
      address: {},
      loading: false,
      payTime: ""
    };
  },
  mounted() {
    this.fetchOrder();
  },
  methods: {
    fetchOrder() {
      this.axios
        .get(`api/goods_order/${this.$route.query.order_id}`)
        .then(res => {
          let data = res.data;
          this.orderData = data;
          let regionCode = JSON.parse(data.buyer.address).region;
          this.address = {
            region:
              CodeToText[regionCode[0]] +
              "-" +
              CodeToText[regionCode[1]] +
              "-" +
              CodeToText[regionCode[2]],
            detail: JSON.parse(data.buyer.address).detail
          };
          this.tableData = [
            {
              name: data.goods.title,
              price: "￥" + data.goods.price,
              amount: data.amount,
              remark: data.remark,
              kind: "常规"
            }
          ];
          this.currentStep = data.status + 1;
        });
    },
    pay() {
      this.loading = true;
      this.axios.get(`/api/pay/${this.$route.query.order_id}`).then(res => {
        this.$Notice.success({ title: "付款成功" });
        this.fetchOrder();
      });
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    }
  }
};
</script>

<style>
</style>